<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>css居中</title>
    <style type="text/css">
    *{
    	margin: 0;
    	padding: 0;
    }
    /*方法一*/
	/*.outer{
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	.inner{
		width: 300px;
		height: 300px;
		background:red;
		display: inline-block;
	}*/

	/*方法二*/
	/*.outer{
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		display:flex;
        justify-content:center;
        align-items:center;
	}
	.inner{
		width: 300px;
		height: 300px;
		background:red;
	}*/

	/*方法三*/
	/*.outer{
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		position: relative;
	}
	.inner{
		width: 300px;
		height: 300px;
		background:red;
		position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
	}*/

	/*方法四*/
	/*.outer{
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		position: relative;
	}
	.inner{
		width: 300px;
		height: 300px;
		background:red;
		position:absolute;
        left:50%;
        top:50%;
        margin-left: -150px;
        margin-top: -150px;
	}*/


	/*方法五*/
	.outer{
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		position: relative;
	}
	.inner{
		width: 300px;
		height: 300px;
		background:red;
		position:absolute;
        left:0;
        top:0;
        right: 0;
        bottom: 0;
        margin: auto;
	}

	.box{
		width: 200px;
		height: 200px;
		border: 1px solid  #ccc;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
	}
	.img{
		height: 100px;
		width: 100px;
		display: inline-block;
	}

    </style>
</head>
<body>

	<div class='outer'>
		<div class='inner'>
			
		</div>
	</div>

	<div class='box'>
		<img class='img' src='./head.png' >
	</div>

</body>

<script>
	
</script>

</html>